<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    
    <head>
        <meta charset="utf-8">
        <title>
            X-admin v1.0
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="/css/x-admin.css" media="all">
    </head>
    
    <body>
        <div class="x-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <label for="link" class="layui-form-label">
                        <span class="x-red">*</span>轮播图
                    </label>
                    <div class="layui-input-inline">
                        <div class="site-demo-upbar">
                            <input type="file" name="upfile" class="layui-upload-file" id="test">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="link" class="layui-form-label">
                        <span class="x-red">*</span>图片预览
                    </label>
                    <div class="layui-input-inline" id="bannerImage">
                        <div class="site-demo-upbar">

                        </div>
                    </div>
                </div>

                <div class="layui-form-item">
                    <label for="imageTitle" class="layui-form-label">
                        <span class="x-red">*</span>图片标题
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="imageTitle" name="imageTitle" required="" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="rank" class="layui-form-label">
                        <span class="x-red">*</span>排序序号
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="rank" name="rank" required="" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="imageLink" class="layui-form-label">
                        <span class="x-red">*</span>跳转地址
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="imageLink" name="imageLink" required="" lay-verify="required"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="ee" class="layui-form-label">
                        <span class="x-red">*</span>跳转类型
                    </label>
                    <div class="layui-input-inline">
                        <select id="linkedType">
                            <option value="1">H5</option>
                            <option value="2">native</option>
                        </select>
                    </div>
                </div>
                
                <div class="layui-form-item">
                    <label for="productParam" class="layui-form-label">
                        <span class="x-red">*</span>产品参数
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="productParam" name="productParam" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="ee" class="layui-form-label">
                        <span class="x-red">*</span>业务类型
                    </label>
                    <div class="layui-input-inline">
                        <select id="bizType">
                            <option value="0">首页</option>
                            <option value="1">其它</option>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button  class="layui-btn" lay-filter="add" lay-submit="">
                        增加
                    </button>
                </div>
            </form>
        </div>
        <script src="/lib/layui/layui.js" charset="utf-8">
        </script>
        <script src="/js/x-layui.js" charset="utf-8">
        </script>
        <script>
            var imageFilename = '';
            layui.use(['form','layer', 'upload'], function(){
                $ = layui.jquery;
              var form = layui.form();
              var layer = layui.layer;

                layui.upload({
                    url: '/banner/upload.html', //上传接口
                    success: function(res){ //上传成功后的回调
                        imageFilename = res.data.filename;
                        $('#bannerImage').html('<img src="'+ res.data.imageUrl +'" width="100px" height="40px">');
                    }
                });

              //监听提交
              form.on('submit(add)', function(data){
                //发异步，把数据提交给服务器
                  $.ajax({
                      url: '/banner/add.html',
                      type: 'POST', //GET
                      async: true,    //或false,是否异步
                      data: {
                          imageTitle : $('#imageTitle').val(),
                          rank : $('#rank').val(),
                          imageLink : $('#imageLink').val(),
                          linkeType : $('#linkedType').val(),
                          productionParam : $('#productParam').val(),
                          bizType : $('#bizType').val(),
                          imageUrl : imageFilename
                      },
                      timeout: 10000,    //超时时间
                      dataType: 'json',    //返回的数据格式：json/xml/html/script/jsonp/text
                      success: function (ajaxData, textStatus, jqXHR) {
                          if (!ajaxData.success) {
                              alert(ajaxData.message);
                              layer.alert(ajaxData.message, {icon: 6},function () {});
                              return;
                          }

                          layer.alert("增加成功", {icon: 6},function () {
                              // 获得frame索引
                              var index = parent.layer.getFrameIndex(window.name);
                              //关闭当前frame
                              window.parent.loadBanner();
                              parent.layer.close(index);
                          });
                      }
                  });
                return false;
              });
            });
        </script>
        <script>

        </script>
    </body>

</html>